<%= render component('ui/forms/search/result').new do %>
  <%= solidus_form_for(@order.line_items.build(variant: @variant), url: solidus_admin.order_line_items_path(@order), method: :post, html: {
    "data-controller": "readonly-when-submitting",
    class: "flex items-center",
  }) do |f| %>
    <%= f.hidden_field(:variant_id) %>
    <div class="flex gap-2 grow">
      <%= render component("ui/thumbnail").new(
        src: @image&.url(:small),
        alt: @variant.name
      ) %>
      <div class="flex-col">
        <div class="leading-5 text-black font-semibold text-sm"><%= @variant.name %></div>
        <div class="leading-5 text-gray-500 font-normal text-sm">
          SKU:
          <%= @variant.sku %>
          <%= @variant.options_text.presence&.prepend("- ") %>
        </div>
      </div>
    </div>
    <div class="flex gap-2 items-center">
      <span class="text-gray-500 font-normal text-sm"><%= render component("products/stock").from_variant(@variant) %></span>
      <span class="text-black font-normal text-sm"><%= @variant.display_price.to_html %></span>
    </div>
  <% end %>
<% end %>
